<template>
	<div class="echarts-box">
		<div id="barEcharts" :style="{ width: '100%', height: '300px' }"></div>
	</div>
</template>


<script setup>
	import * as echarts from "echarts";
	import {
		onMounted,
		onUnmounted,
		reactive
	} from 'vue';

	let data = reactive([15, 5, 22, 13, 8, 5, 6, 21, 14, 12, 13, 10, 8, 8, 10, 8])

	/// 声明定义一下echart
	let echart = echarts;

	onMounted(() => {
		let arr = []
		for (let i = 0; i <= data.length; i++) {
			arr.push({
				value: data[i],
				itemStyle: {
					color: Colors()
				}
			})
		}
		initChart(arr);
	});

	onUnmounted(() => {
		echart.dispose;
	});

	//颜色对象
	function Colors() {
		let r = Math.floor(Math.random() * 255);
		let g = Math.floor(Math.random() * 255);
		let b = Math.floor(Math.random() * 255);
		let color = 'rgb(' + r + ',' + g + ',' + b + ')';
		return color
	}

	// 基础配置一下Echarts
	function initChart(arr) {
		let chart = echart.init(document.getElementById("barEcharts"));
		let option = {
			xAxis: {
				type: 'category',
				axisLabel: {
					color: '#000',
					rotate: 45,
				},
				axisLine: {
					lineStyle: {
						color: '#000'
					}
				},

				data: ['汽车制造商', '分销商', '加盟商', '零售商', '医院', '其他医疗机构', '医疗设备生产商', '土建工程公司', '安装工程公司', '工程设备贸易公司', '连锁商超',
					'食品贸易公司', '代理商', '直接客户', '电子产品制造商', '食品生产公司'
				]
			},
			dataZoom: [{
					type: 'inside',
					show: true,
					// 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
					start: 0,
					// 数据窗口范围的结束百分比。范围是：0 ~ 100。
					end: 100,
					// zoomOnMouseWheel: 'ctrl',
					// 第一个 dataZoom 组件
					xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
				},

			],
			yAxis: {
				type: 'value',
				name: '客户数量',
				nameGap: 30,
				nameTextStyle: {
					fontWeight: 'bolder',
					color: '#000'
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: '#000'
					}
				}
			},
			tooltip: {
				trigger: 'axis',
				extraCssText: 'width:135px;height:60px;',
				axisPointer: {
					type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
				}
			},
			series: [{
					// color: ['#26c0c0', '#b6c335', '#e87c24', '#e87c24', '#28727b', '#ff8463', '#9dc763', '#fad75f', '#f5a43b', '#61c0de', '#d7504c', '#c4e678', '#f3e000', '#f0805a', '#c0232a', '#c1392b'],
					name: '客户数量',
					data: arr,
					avoidLabelOverlap: false,
					type: 'bar',
					barWidth: '76%',
					itemStyle: {

						normal: {
							label: {
								show: true, //开启显示
								position: 'top', //在上方显示
								textStyle: { //数值样式
									color: '#333',
									fontSize: 13
								}
							}
						}
					}
				},

			]
		};
		// 把配置和数据放这里
		chart.setOption(option);
		window.onresize = function() {
			//自适应大小
			chart.resize();
		};
	}
</script>

<style scoped>

</style>